import { history, useRequest } from "@umijs/max";
import styles from "./style.less";
import { getUerInfo, removeToken } from "@/utils/info";
import React from "react";
import { DownOutlined } from "@ant-design/icons";
import type { MenuProps } from "antd";
import { Dropdown, Space } from "antd";
import { logout } from "@/services/login";

export default () => {
  const { userName, } = getUerInfo() || {};
  const { run: logoutFun } = useRequest(
    () =>
      logout(),
    {
      manual: true,
      onSuccess: (res) => {
        console.log(res)
        if(res instanceof Error) return
        history.push("/login");
        removeToken();
      },
    }
  );

  const items: MenuProps["items"] = [
    // {
    //   key: "1",
    //   label: <span>修改密码</span>,
    // },
    {
      key: "2",
      label: <span onClick={logoutFun}>退出登录</span>,
    },
  ];
  return (
    <div className={styles.header}>
      <span className={styles.title}>家庭物资管理系统</span>
      <Dropdown menu={{ items }} className={styles.user}>
        <div>
          <Space>
            {userName}
            <DownOutlined />
          </Space>
        </div>
      </Dropdown>
    </div>
  );
};
